; (function (w) {
  var newCalendar = Vue.extend({
    template: `<div class="hl-date-container">
      <div class="hl-date-wrap">
        <input type="text" :placeholder="tips" :class="{'active': calendarflag}" class="hl-date-text" readonly v-model="currentValue" @click.prevent="showhideCalendar" />
        <span class="icon-Gm-calendar hl-date-icon" @click.prevent="showhideCalendar" v-if="icontype=='calendar'"></span>
        <span class="icon-Gm-calendar icon-Gm-edit" @click.prevent="showhideCalendar" v-if="icontype=='edit'"></span>
      </div>
      <div class="hl-date-calendar" v-if="calendarflag" @click="cancelBubbleTrue">
        <div class="hl-date-clear">
          <div class="hl-date-select-wrap">
            <div class="hl-date-select">
              <span class="hl-date-button icon-calendar-reduce" @click="regYear"></span>
              <span class="hl-date-select-span" @click="clickShowYear">{{year}}</span>
              <span class="hl-date-button icon-calendar-add" @click="addYear"></span>
            </div>
            <div class="hl-date-sn-sel" v-if="yearflag">
              <div class="hl-date-sn-li" v-for="item in yearli" @click="clickSelYear(item)">{{item}}</div>
            </div>
          </div>
          <div class="hl-date-select-wrap">
            <div class="hl-date-select">
              <span class="hl-date-button icon-calendar-reduce" @click="regMonth"></span>
              <span class="hl-date-select-span" @click="clickShowMonth">{{month | toDou}}</span>
              <span class="hl-date-button icon-calendar-add" @click="addMonth"></span>
            </div>
            <div class="hl-date-sn-sel" v-if="monthflag">
              <div class="hl-date-sn-li" v-for="item in monthSel" @click="clickSelMonth(item)">{{item}}</div>
            </div>
          </div>
          <div class="hl-date-time" v-if="timeflag">
            <input type="text" class="hl-date-hour" v-model="hour" />
            <span>:</span>
            <input type="text" class="hl-date-mins" v-model="mins" />
          </div>
        </div>
        <div class="hl-date-week">
          <div class="hl-date-week-li" v-for="item in week">{{item}}</div>
        </div>
        <div class="hl-date-day">
          <div class="hl-date-day-li" v-for="item in blankdateli"></div>
          <div class="hl-date-day-li" @click="setDateNumber(item)" :class="{'hl-date-active': item == dayItem,'hl-date-scope':isScope(item)}" v-for="item in dateli">{{item}}</div>
        </div>
      </div>
    </div>`,
    model: {
      prop: 'value',
      event: 'change'
    },
    props: {
      value: [String, Number],
      tips: {
        type: String,
        default: ''
      },
      time: {
        type: String,
        default: ''
      },
      timeflag: {
        type: Boolean,
        default: false
      },
      icontype: {
        type: String,
        default: 'calendar',
      },
      beforedate: {
        type: String,
        default:'',
      },
      afterdate: {
        type: String,
        default:'',
      }
    },
    data: () => ({
      currentValue: '',
			oldDate: '',
      week: ['一', '二', '三', '四', '五', '六', '日'],
      monthSel: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
      year: new Date().getFullYear(),
      month: toDou(new Date().getMonth() + 1),
      dayItem: new Date().getDate(),
      hour: toDou(new Date().getHours()),
      mins: toDou(new Date().getMinutes()),
      yearflag: false,
      monthflag: false,
      calendarflag: false,
    }),
    filters: {
      toDou(n) {
        return toDou(n)
      }
    },
    computed: {
      yearli() {
        var result = [];
        var nowYear = new Date().getFullYear();
        var nowYear = nowYear - 15;
        for (var i = 0; i < 100; i++) {
          nowYear++;
          result.push(nowYear)
        }
        return result;
      },
      dateli() {
        var result;
        var y, m; //y年份， m月份
        if (!this.year) {
          y = new Date().getFullYear();
        }
        if (!this.month) {
          m = new Date().getMonth();
        }
        if (this.year) {
          y = this.year;
        }
        if (this.month) {
          m = Number(this.month) - 1;
        }
        result = mGetDate(y, m);
        return result
      },
      blankdateli() {
        var result;
        var y, m; //y年份， m月份
        if (!this.year) {
          y = new Date().getFullYear();
        }
        if (!this.month) {
          m = new Date().getMonth();
        }
        if (this.year) {
          y = this.year;
        }
        if (this.month) {
          m = Number(this.month) - 1;
        }
        var date = getWeekDay(y, m);
        if (date == 0) { date = 7 };
        result = date - 1;
        return result
      }
    },
    watch: {
      value(val, oldval) {
				this.oldDate = oldval
        this.currentValue = val
				this.year = val.split('-')[0];
				this.month = val.split('-')[1];
				this.dayItem = val.split('-')[2];
      }
    },
    methods: {
      isScope(val) {
        if(!this.beforedate && !this.afterdate){
          return false
        }
        if(this.beforedate && !this.afterdate){
          let date = this.year + '-' + this.month + '-' + val
          let now  = new Date(date).getTime()
          let qian = new Date(this.beforedate).getTime()
          console.log(now)
          console.log(qian)
          if(now <= qian){
            return true
          }
          return false
        }
        if(!this.beforedate && this.afterdate){
          let date = this.year + '-' + this.month + '-' + val
          let now  = new Date(date).getTime()
          let hou = new Date(this.afterdate).getTime()
          if(now > hou){
            return true
          }
          return false
        }
      },
      // 点击获得当前日期
      setDateNumber(item) {
        if(this.beforedate && !this.afterdate){
          let date = this.year + '-' + this.month + '-' + item
          let now  = new Date(date).getTime()
          let qian = new Date(this.beforedate).getTime()
          if(now < qian){
            return false
          }
        }
        if(!this.beforedate && this.afterdate){
          let date = this.year + '-' + this.month + '-' + item
          let now  = new Date(date).getTime()
          let hou = new Date(this.afterdate).getTime()
          if(now > hou){
            return false
          }
        }
        this.dayItem = item;
        let ymd = this.year + '-' + toDou(this.month) + '-' + toDou(this.dayItem)
        let time = toDou(this.hour) + ':' + toDou(this.mins)
        let date = {
          year: this.year,
          month: toDou(this.month),
          date: toDou(this.dayItem),
          ymd: ymd,
          time: time,
					oldDate: this.oldDate
        }
        this.currentValue = ymd;
        this.$emit('change', this.currentValue, this.oldDate)
        this.$emit('on-change', date, this.oldDate)
        this.calendarflag = false;
      },
      // 年份递增
      addYear() {
        this.year++
				this.$emit('on-click')
      },
      // 年份递减
      regYear() {
        this.year--
				this.$emit('on-click')
      },
      // 月份递增
      addMonth() {
				this.$emit('on-click')
        if (this.month > 11) {
          this.month = 0;
          this.year++
        }
        this.month++

      },
      // 月份递减
      regMonth() {
				this.$emit('on-click')
        if (this.month < 2) {
          this.month = 12;
          this.year--
          return
        }
        this.month--
      },
      // 点击显示隐藏年份
      clickShowYear() {
        this.monthflag = false;
        this.yearflag = !this.yearflag
				this.$emit('on-click')
      },
      //点击选择年份
      clickSelYear(val) {
        this.year = val;
        this.yearflag = false;
				this.$emit('on-click')
        return false
      },
      // 点击显示隐藏月份
      clickShowMonth() {
        this.yearflag = false;
        this.monthflag = !this.monthflag
				this.$emit('on-click')
      },
      //点击选择月份
      clickSelMonth(val) {
        this.month = val;
        this.monthflag = false;
				this.$emit('on-click')
      },
      //显示隐藏日历
      showhideCalendar() {
        this.calendarflag = !this.calendarflag
				this.$emit('on-click')
      },
      //阻止冒泡
      cancelBubbleTrue() {
        this.calendarflag = true

        return false
      }
    },
    created() {
      if (this.value) {
        this.currentValue = this.value;
				this.oldDate = JSON.parse(JSON.stringify(this.value))
        this.year = this.value.split('-')[0];
        this.month = this.value.split('-')[1];
        this.dayItem = this.value.split('-')[2];
      }
      if (this.time) {
        this.hour = this.time.split(':')[0];
        this.mins = this.time.split(':')[1];
      }
    },
    mounted() {
      document.addEventListener('click', (e) => {
        if (!this.$el.contains(e.target)) {
          if (e.target.className.indexOf('hl-date-sn-li') > -1) return
          this.calendarflag = false
        }
      })
    }
  })

  Vue.component('web-calendar', newCalendar);

  function toDou(n) {
    if (!n) return;
    return Number(n) < 10 ? '0' + Number(n) : '' + Number(n);
  }
  //获得每月天数
  function mGetDate(year, month) {
    var d = new Date(year, month + 1, 0);
    return d.getDate();
  }
  //获取每月一号星期几
  function getWeekDay(year, month) {
    var odatef = new Date();
    odatef.setFullYear(year, month, 1);
    return odatef.getDay();
  }
}(window))
